<!--
 * @Author: honghong
 * @LastEditors: honghong
 * @Description: 登录
 * @email: 3300536651@qq.com
 * @Date: 2019-02-18 10:59:15
 * @LastEditTime: 2020-03-06 14:52:49
 -->
<img src="#" id="code" alt="">
<button id="recognize">识别</button>
<div class="login-in">
  <div class="login-bg">
    <div class="login-content clearfix">
      <div class="login-left">
        <span class="project-name"><img src="assets/image/logo.png" height="90" alt="logo"></span>
        <!-- <img class="map-img" src="../../../assets/image/login_pic.png"> -->
        <!-- <img class="left-img" src="../../../assets/image/login_left.png"> -->
      </div>
      <div class="login-right">
        <div class="login-right-content">
          <h2 class="login-h2">
            欢迎登录
          </h2>
          <div class="sigin-error">
            <div class="sigin-error-in" *ngIf="hasError">
              <i class="icon iconfont icon-error"></i>
              <span>{{msg}}</span>
            </div>
          </div>
          <form>
            <div class="user-box">
              <nz-input-group [nzSuffix]="userIdSuffix" [nzPrefix]="userIdPrefix">
                <input id="userName" name="userName" required type="text" class="form-control" nz-input
                  placeholder="请输入用户名admin" [(ngModel)]="userId" #userName="ngModel" />
              </nz-input-group>
              <ng-template #userIdPrefix><i class="icon iconfont fc-icon-personnel"></i></ng-template>
              <ng-template #userIdSuffix><i nz-icon type="close-circle" (click)="userId =''" *ngIf="userId"></i>
              </ng-template>
              <div class="fc-form-error" *ngIf="userName.invalid && (userName.dirty || userName.touched)">
                <div *ngIf="userName.errors.required">
                  用户名不能为空.
                </div>
              </div>
            </div>
            <div class="user-box">
              <nz-input-group [nzSuffix]="pwdSuffix" [nzPrefix]="pwdPrefix">
                <input id="passwordValid" name="passwordValid" class="form-control" required type="password"
                  [(ngModel)]="password" (keyup)="checkStrong($event)" nz-input placeholder="请输入密码admin" #passwordValid="ngModel" />
              </nz-input-group>
              <ng-template #pwdPrefix><i class="icon iconfont fc-icon-password"></i></ng-template>
              <ng-template #pwdSuffix><i nz-icon type="close-circle" (click)="password = ''" *ngIf="password"></i>
              </ng-template>
              <div class="fc-form-error"
                *ngIf="passwordValid.invalid && (passwordValid.dirty || passwordValid.touched)">
                <div *ngIf="passwordValid.errors.required">
                  密码不能为空.
                </div>
              </div>
            </div>
            <div class="user-box">
              <fc-verifycode #verifyCode></fc-verifycode>
            </div>
            <div class="user-box pwd-strength">
              <div class="pwd-strength-show">
                <span class="pwd-strength-box pwd-strength-box1 " [ngClass]="{'pwd-strength-weak': checkColors.weak === 'active' }"></span>
                <span class="pwd-strength-box pwd-strength-box2" [ngClass]="{'pwd-strength-mid' :checkColors.mid === 'active' }"></span>
                <span class="pwd-strength-box pwd-strength-box3" [ngClass]="{ 'pwd-strength-strong':checkColors.strong === 'active' }"></span>
              </div>
              <div class="pwd-strength-describe">
                <span class="pwd-strength-text"
                  >弱</span>
                <span class="pwd-strength-text" >中</span>
                <span class="pwd-strength-text"
                  >强</span>
              </div>
            </div>
            <div class="user-box remember-user">
              <label nz-checkbox [(ngModel)]="remember" name="remember">记住密码</label>
            </div>
            <div class="user-box login-btn">

              <button nz-button nzType="primary" (click)="login()" [nzBlock]="true">登录</button>
            </div>
            <div class="google-download">
              <p>本系统仅支持
                <a href="../assets/browser/chromedev_x64-v71.0.3554.0.exe">谷歌</a>和<a
                  href="../assets/browser/360cse_9.5.0.138.exe">360急速</a>浏览器</p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>